<template>
  <div class="container">
    <div class="header">系统水印</div>
    <div class="c-block">
      <div class="c-form">
        <div class="form-item">
          <div class="c-label">用户水印</div>
          <el-switch
            v-model="form.enable"
            active-value="1"
            inactive-value="0"
            @change="
              (val) => (val === '1' ? createWatermark() : destroyWatermark())
            "
          ></el-switch>
        </div>
        <div class="form-item">
          <div class="c-label">水印内容</div>
          <el-checkbox-group v-model="checkList" @change="createWatermark">
            <el-checkbox label="name" :disabled="form.enable !== '1'"
              >姓名</el-checkbox
            >
            <el-checkbox label="tel" :disabled="form.enable !== '1'"
              >手机号</el-checkbox
            >
            <el-checkbox label="ip" :disabled="form.enable !== '1'"
              >登录IP</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="form-item">
          <div class="c-label">透明度</div>
          <el-slider
            v-model="alpha"
            :step="1"
            :max="100"
            style="width: 200px"
            class="mr-15"
            @change="createWatermark"
            :disabled="form.enable !== '1'"
          >
          </el-slider>
          <el-input-number
            @change="createWatermark"
            step-strictly
            :controls="false"
            v-model="alpha"
            :max="100"
            :min="0"
            :step="1"
            class="ninput mr-15"
            :disabled="form.enable !== '1'"
          />
          %
        </div>
        <div class="btns">
          <el-button type="primary" @click="saveConfig">保存</el-button>
          <el-button plain type="primary" @click="getConfig"
            >取消</el-button
          >
        </div>
      </div>
      <div class="c-preview" id="c-watermark">
        <div class="preview-label">水印预览</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getConfig, saveConfig } from "@/api/system-config/systemWatermark";
import DictRadio from "@/components/DictRadio";
import { Watermark } from "watermark-js-plus";
import { setWatermark, destroyWatermark } from "@/utils/watermark";
export default {
  name: "system",
  data() {
    return {
      form: {},
      isclose: false,
    };
  },
  components: {
    DictRadio,
  },
  computed: {
    checkList: {
      get() {
        return this.form.contents ? this.form.contents.split(",") : [];
      },
      set(val) {
        this.form.contents = val.join(",");
      },
    },
    alpha: {
      get() {
        return +this.form.alpha * 100;
      },
      set(val) {
        this.form.alpha = String(val / 100);
      },
    },
  },
  mounted() {
    this.getConfig();
  },
  methods: {
    createWatermark() {
      this.destroyWatermark();
      let content = "";
      if (this.checkList.includes("name")) {
        content += this.form.userName;
      }
      if (this.checkList.includes("tel")) {
        content += `   ${this.form.tel}`;
      }
      if (this.checkList.includes("ip")) {
        content += `   ${this.form.ip}`;
      }
      this.$watermark = new Watermark({
        parent: "#c-watermark",
        content,
        zIndex: 99999,
        globalAlpha: this.form.alpha,
        fontSize: "24px",
        fontColor: "#4986F5",
      });
      this.$watermark.create();
    },
    destroyWatermark() {
      this.$watermark && this.$watermark.destroy();
    },
    getConfig() {
      return getConfig().then(({ data }) => {
        this.form = data;
        data.enable === "1" && this.createWatermark();
      });
    },
    saveConfig() {
      saveConfig(this.form).then(({ data }) => {
        this.$message.success("保存成功！");
        this.changeStatus();
      });
    },
    changeStatus() {
      this.form.enable === "1" ? setWatermark() : destroyWatermark();
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 20px 24px;
  background-color: #fff;
  height: 100%;
  margin-bottom: 50px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.header {
  height: 27px;
  font-size: 20px;
  font-weight: 600;
  color: #2d2d2d;
  line-height: 19px;
  margin-bottom: 27px;
}
.form-item {
  height: 19px;
  font-size: 14px;
  font-weight: 400;
  color: #2d2d2d;
  line-height: 19px;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
}
.c-label {
  width: 80px;
  margin-right: 50px;
  display: inline-block;
  vertical-align: top;
}
.btns {
  position: absolute;
  left: 28px;
  bottom: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.group {
  display: inline-grid;
  grid-auto-columns: 1fr;
  gap: 30px;
}
.ninput {
  width: 80px;
  margin: 0 17px 0 27px;
}
.c-block {
  display: flex;
  flex: 1;
  height: 0;
}
.c-preview {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #f6f6f6;
  margin-left: 30px;
}
.preview-label {
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  position: absolute;
  top: -25px;
  left: 0;
}

:deep(.el-slider__input) {
  width: 80px;
}
</style>
